import {useEffect, useRef} from "react";
import './index.less'

const StudyCanvas = () => {
    // 这里使用 useRef 钩子，保证函数组件重新渲染后只创建一次对象，返回相同的引用
    const wrapRef = useRef<HTMLDivElement>(null)
    const canvasRef = useRef<HTMLCanvasElement>(null)
    let canvasHeight: number
    let canvasWidth: number
    let ctx: CanvasRenderingContext2D

    // 函数组件中执行副作用操作
    //例如数据请求、直接手动修改 DOM 节点、直接操作页面「修改页面标题等」、记录日志等都是副作用操作
    // 第一个参数就是副作用函数 effect
    // 第二个参数表示依赖项，是一个可选参数。当不传入该参数时，每次 UI 渲染 effect 函数都会执行
    useEffect(() => {
        const canvas = initCanvas()
        canvasWidth = canvas.width
        canvasHeight = canvas.height

        // 强转 canvas.getContext 返回值，过滤null 值的返回可能
        ctx = canvas.getContext('2d') as CanvasRenderingContext2D
        animate()
    })
    const draw = () => {
        // 多次绘制，清除画布
        ctx.clearRect(0, 0, canvasWidth, canvasHeight)
        // 添加一个底部背景色
        ctx.fillStyle = 'green'
        ctx.fillRect(0, 0, canvasWidth, canvasHeight)
        //创建一个

        ctx.fillStyle = 'red'
        // 绘制圆形方法
        ctx.arc(200, 200, 60, 0, 7, false)
        // ctx.fillRect(0, 0, canvasWidth/2, canvasHeight/2)
        ctx.fill()
        ctx.beginPath()
        // 添加一个空心文字
        ctx.font = "30px Arial";
        // ctx.globalCompositeOperation= 'destination-over'
        ctx.strokeText("Hello World", 10, 50);
        ctx.fill()
        // 创建渐变

        var grd = ctx.createLinearGradient(0, 0, 200, 0);

        grd.addColorStop(0, "red");
        grd.addColorStop(1, "white");
        // 填充渐变
        ctx.fillStyle = grd;
        ctx.fillRect(10, 10, 150, 80);

    }
    // 获取当前时间，并返回时分秒
    const getCurrentTime = () => {
        const date = new Date()
        return [date.getHours(), date.getMinutes(), date.getSeconds()]
    }
    const animate = () => {
        draw()
        window.requestAnimationFrame(animate)
    }

    const initCanvas = () => {
        // 强转类型
        const wrap = wrapRef.current as HTMLDivElement
        const canvas = canvasRef.current as HTMLCanvasElement
        canvas.width = wrap.clientWidth
        canvas.height = wrap.clientHeight
        return canvas
    }
    return <>
        <div className={'canvas_container'} ref={wrapRef}>
            <div className={'canvas_name'}>213123</div>
            <canvas ref={canvasRef}></canvas>
        </div>
    </>
}
export default StudyCanvas